<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 菜单管理</el-breadcrumb-item>
                <el-breadcrumb-item>菜单列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div>
                <el-button icon="el-icon-add" @click="handleAdd" type="success">添加</el-button>
            </div>
            <el-table :data="tableData" border class="table" @selection-change="handleSelectionChange">

                <el-table-column prop="id" label="序号" width="80"></el-table-column>
                <el-table-column prop="name" label="名称" width="160" :formatter="formatname"> </el-table-column>
                <el-table-column prop="path" label="路由"></el-table-column>
                <el-table-column prop="is_menu" label="是菜单" width="80" :formatter="formatter"></el-table-column>
                <el-table-column prop="sort" label="排序" width="50"></el-table-column>
                <el-table-column prop="icon" label="图标" width="80">
                    <template slot-scope="scope">
                        <i :class="scope.row.icon"></i>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="240" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="addSub(scope.$index, scope.row)">添加子菜单</el-button>
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="idx>0?'编辑':'添加'" :visible.sync="editVisible" width="80%">
            <el-form ref="form" :model="form" label-width="200px">
                <el-form-item label="名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="sort">
                    <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item label="页面路由">
                    <el-input v-model="form.path"></el-input>
                </el-form-item>
                <el-form-item v-if="apiFlag && !id" label="控制器名称(小写 生成接口用)">
                    <el-input v-model="controller" @blur="createApi"></el-input>
                </el-form-item>
                <el-form-item label="接口" v-if="apiFlag">
                    <el-button type="primary" @click="addApi">添加</el-button>
                    <el-tooltip class="item" effect="dark" content="选填,不需要接口验证,在参数配置里设置" placement="top-start">
                        <i class="el-icon-info"></i>
                    </el-tooltip>
                    <div style="margin-top: 10px;" v-for="(api,k) in apiAuth" :key="k">
                        <span>名称：</span>
                        <el-input v-model="apiAuth[k].name" style="width: 20%;"></el-input>
                        <span>接口：</span>
                        <el-input v-model="apiAuth[k].api_url" style="width: 30%;"></el-input>
                        <el-button type="danger" @click="delApi(k)">删除</el-button>
                    </div>

                </el-form-item>
                <el-form-item label="图标">
                    <i :class="form.icon"></i>
                    <span @click="showIcon=true">选择图标</span>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item label="是否菜单">
                    <el-radio v-model="form.is_menu" label="1">是</el-radio>
                    <el-radio v-model="form.is_menu" label="0">否</el-radio>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
        <icon @selectIcon="selectIcon" v-show="showIcon"></icon>
    </div>
</template>

<script>
    import icon from '@/page/common/icon';
    export default {
        components: {
            icon
        },
        data() {
            return {
                url: './static/vuetable.json',
                tableData: [],
                cur_page: 1,
                multipleSelection: [],
                editVisible: false,
                delVisible: false,
                showIcon: false,
                controller: '',
                form: {
                    name: '',
                    desc: '',
                    path: '',
                    is_menu: '1',
                    pid: 0,
                    id: 0,
                    icon: '',
                },
                apiFlag: true,
                apiAuth: [],
                idx: -1,
                id: 0,
                level: -1,
            }
        },
        created() {
            this.getData();
        },
        activated() {
            this.form.pid = 0;
            this.getData();
        },

        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getData();
            },
            // 获取数据
            getData() {
                // console.log(this.form.pid);
                this.$post_('auth/auth-rule/auth-rule-list', {
                    pid: this.form.pid
                }, (res) => {
                    this.tableData = res.data;
                    this.apiFlag = res.extend.apiFlag;
                });
            },
            formatter(row, column) {
                return row.is_menu == '1' ? '是' : '否';
                return 'ok';
            },
            formatname(row, column) {
                if (row.level < 1 || row.pid <= 0) return row.name;
                let blank = "\xa0\xa0".repeat(row.level);
                let pre = blank + '|';
                let line = '-';
                let line2 = line.repeat(row.level);
                return pre + line2 + row.name;
            },
            formaticon(row, column) {
                return '<i class="' + row.icon + '"></i>';
            },
            //添加
            handleAdd() {
                this.form.name = '';
                this.form.path = '';
                this.form.desc = '';
                this.idx = -1;
                this.id = 0;
                this.editVisible = true;
                this.apiAuth = [];
            },

            //修改
            handleEdit(index, row) {
                this.idx = index;
                this.id = row.id;
                const item = this.tableData[index];
                this.form = {
                    name: item.name,
                    path: item.path,
                    desc: item.desc,
                    is_menu: item.is_menu,
                    sort: item.sort,
                    id: this.id,
                    pid: row.pid,
                    icon: item.icon,
                }
                this.apiAuth = row.api_paths ? row.api_paths : [];
                this.editVisible = true;
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            createApi() {
                if(!this.controller) return;
                this.apiAuth.push({
                    name: '列表-api',
                    api_url: 'v1/' + this.controller + '/list'
                })
                this.apiAuth.push({
                    name: '修改-api',
                    api_url: 'v1/' + this.controller + '/edit'
                })
                this.apiAuth.push({
                    name: '删除-api',
                    api_url: 'v1/' + this.controller + '/del'
                })
                this.apiAuth.push({
                    name: '信息-api',
                    api_url: 'v1/' + this.controller + '/info'
                })
            },

            // 保存编辑
            saveEdit() {
                // console.log(this.form);return;
                this.form.api_paths = JSON.stringify(this.apiAuth);
                this.$post_('auth/auth-rule/edit-auth-rule', this.form, (res) => {
                    console.log(res);
                    if (res.code == '0') {
                        this.getData();
                        this.$message.success(res.msg);
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                this.editVisible = false;
            },

            //删除
            handleDelete(index, row) {
                this.id = row.id;
                this.idx = index;
                this.delVisible = true;
            },

            // 确定删除
            deleteRow() {
                this.$post_('auth/auth-rule/del-auth-rule', {
                    id: this.id
                }, (res) => {
                    console.log(res);
                    if (res.code == '0') {
                        this.$message.success(res.msg);
                    } else {
                        this.$message.warning(res.msg);
                    }
                })
                this.delVisible = false;
                this.tableData.splice(this.idx, 1);
            },
            //添加子菜单
            addSub(index, row) {
                this.form.pid = row.id;
                this.form.id = 0;
                this.id = 0;
                this.handleAdd();
            },

            //添加接口
            addApi() {
                let item = {
                    name: '',
                    api_url: '',
                    id: ''
                };
                this.apiAuth.push(item);
            },

            //删除接口
            delApi(k) {
                this.apiAuth.splice(k, 1);
            },

            selectIcon(icon) {
                console.log(icon);
                this.showIcon = false;
                this.form.icon = icon;
            }
        }
    }
</script>

<style scoped>
    .iconfont {
        font-size: 20px;
        /*font-weight: bold;*/
    }

    .el-icon-info {
        margin-left: -5px;
        vertical-align: bottom;
        font-size: 20px;
    }

    .del-dialog-cnt {
        font-size: 16px;
        text-align: center
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }
</style>
